<template>
  <div id="map">
    <div id="mouse-position"></div>
    <div class="tree">
      <div class="treetext">图层目录</div>
      <el-tree :data="layerdata" :props="defaultProps" show-checkbox style="width: 200px; height: 250px" default-expand-all :default-checked-keys="[10]" node-key="id" @check="togLayerShow" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs } from "vue"
import { useMapStore } from "../store/useMap.js"

const { mapState } = toRefs(useMapStore())
var gaodeMapLayer = new ol.layer.Tile({
  title: "高德地图",
  source: new ol.source.XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
    wrapX: false,
    crossOrigin: "Anonymous",
  }),
})
var image = new ol.layer.Tile({
  title: "高德地图",
  source: new ol.source.XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    wrapX: false,
    crossOrigin: "Anonymous",
  }),
})
const docLayer = mapState.value.docLayer
const ZoomToExtent = new ol.control.ZoomToExtent({
  extent: [114.31, 30.44, 114.44, 30.53],
  tipLabel: "缩放至光谷",
})
const zoomslider = new ol.control.ZoomSlider()
const scaleLineControl = new ol.control.ScaleLine({
  /* 设置比例尺单位,degrees,imperial,us,nautical,metric */
  units: "metric",
})
const overViewMapControl = new ol.control.OverviewMap({
  /* 鹰眼控件样式  */
  className: "ol-overviewmap ol-custom-overviewmap",
  layers: [image, gaodeMapLayer, docLayer],
  /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
  collapseLabel: "\u00BB",
  /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
  label: "\u00AB",
  /* 初始为展开显示方式 */
  collapsed: false,
  view: new ol.View({
    projection: "EPSG:4326",
    minZoom: 6,
    maxZoom: 18,
  }),
})
const layerTree = ref([])
const defaultProps = {
  children: "children",
  label: "label",
}

const layerdata = [
  {
    id: 10,
    label: "地图文档",
    children: [
      {
        id: 9,
        label: "traffic",
        children: layerTree.value,
      },
    ],
  },
]

const docCatalog = new Zondy.Catalog.MapDoc({
  docName: "traffic",
})
onMounted(() => {
  mapState.value.map = new ol.Map({
    target: "map",
    layers: [image, gaodeMapLayer, docLayer],
    view: new ol.View({
      projection: "EPSG:4326",
      center: [114.37627601413989, 30.47669219970703],
      zoom: 13,
    }),
  })
  mapState.value.map.addControl(ZoomToExtent)
  mapState.value.map.addControl(zoomslider)
  const mousePositionControl = new ol.control.MousePosition({
    //坐标格式
    coordinateFormat: ol.coordinate.createStringXY(5),
    projection: "EPSG:4326",
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
    undefinedHTML: "&nbsp",
  })
  mapState.value.map.addControl(mousePositionControl)
  mapState.value.map.addControl(scaleLineControl)
  mapState.value.map.addControl(overViewMapControl)
  docCatalog.getLayersInfo(data => {
    data.value.forEach(item => {
      let { LayerIndex, Name } = item
      layerTree.value.push({
        id: LayerIndex,
        label: Name,
      })
    })
  })
})
function togLayerShow(a, b) {
  let checkedId = []
  b.checkedNodes.forEach(item => {
    if (item.id) {
      checkedId.push(item.id)
    }
  })
  let allId = []
  layerTree.value.forEach(item => {
    allId.push(item.id)
  })
  mapState.value.docLayer.setLayerStatus(allId, "exclude")
  setTimeout(() => {
    mapState.value.docLayer.setLayerStatus(checkedId, "include")
  }, 10)
}
</script>

<style>
#map {
  width: 100%;
  height: 100%;
}
.ol-zoomslider {
  margin-top: 40px;
}
.custom-mouse-position {
  position: fixed;
  z-index: 999;
  right: 50%;
  bottom: 10px;
  transform: translate(50%);
  font-weight: 900;
  font-size: 1.5em;
  color: #f56c6c;
}
.ol-scale-line-inner {
  color: black;
  font-weight: 900;
}
.ol-custom-overviewmap {
  position: fixed;
  right: 10px;
  bottom: 10px;
  top: auto;
  left: auto;
}
.tree {
  position: absolute;
  z-index: 999;
  right: 40px;
  top: 80px;
}
.treetext {
  background-color: #409eff;
  color: white;
  padding-left: 5px;
}
</style>
